{block:style}
<script src="__static__/js/pinyin.js" type="text/javascript"></script>
<script language="javascript">
function f()
{
   catname=document.getElementById("frm-title").value
   document.getElementById("frm-math").value=codefans_net_CC2PY(catname);
}
</script>
<style>
    .fw-initial{
        font-weight: initial!important;
    }
    .card-item {
        padding: .5rem .5rem 0 .5rem;
    }
    .card-item>*{
        margin-bottom: 5px;
    }
    .card-item .card-img-top:hover {
        cursor: pointer;
    }
    .top{
        border-bottom: 1px #00000015 solid;
        margin-bottom: 1rem;
    }
    .bb-solid{
        border-bottom: 1px #00000008 solid;
    }
    .top h3{
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        display: inline-block;
    }
    .substation .form-group {
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .btn-del-item {
        position: absolute;
        right: 0;
    }
    .custom-control-label {
        vertical-align: sub;
    }
    .card-item .itemid {
        position: absolute;
        top: 4px;
        right: 4px;
        background-color: #ffffff;
        padding: 3px;
        border-radius: 4px;
    }
</style>
{/block:style}
<form role="form" action="" class="frm-operate" method="post">
    <div class="card card-primary">
        <div class="card-body substation">
            <div class="top">
                <a href="javascript:history.back()" class="text-primary">
                    <i class="fas fa-reply"></i>
                </a>
                <h3>{:lang('Add')}</h3>
            </div>
			<div class="form-group row bb-solid">
                <label class="col-sm-2 col-12 col-form-label">{:lang('parent')}: </label>
                <div class="col-sm-8 col-12">
                    <select id="frm-category_id" class="form-control" name="row[parent_id]">
						<option value="-1" selected>作为一级分类</option>
						{hkcms:substation parent_id="-1" id="fz"}
						<option value="{$fz.id}" style="font-size:15px; font-weight:600;" {if $fz.id == $parent_id}selected{/if}><strong>{$fz.name}</strong></option>
						{hkcms:substation parent_id="$fz['id']"}
						<option value="{$item.id}" {if $item.id == $parent_id}selected{/if}>={$item.name}</option>
						{/hkcms:substation}
						{/hkcms:substation}
					</select>
                </div>
            </div>
			<div class="form-group row bb-solid">
                <label for="frm-title" class="col-sm-2 col-12 col-form-label">{:lang('Title')}: </label>
                <div class="col-sm-8 col-12">
                    <input type="text" id="frm-title" class="form-control" name="row[name]" onkeyup="f();" placeholder="{:lang('Enter title')}" data-rule="required">
                </div>
            </div>
            <div class="form-group row bb-solid">
                <label for="frm-math" class="col-sm-2 col-12 col-form-label">{:lang('Math')}: </label>
                <div class="col-sm-8 col-12">
                    <input type="text" id="frm-math" class="form-control" name="row[math]" placeholder="{:lang('Enter math')}" data-rule="required">
                </div>
            </div>
			<div class="form-group row bb-solid">
                <label for="frm-seotitle" class="col-sm-2 col-12 col-form-label">{:lang('Seotitle')}: </label>
                <div class="col-sm-8 col-12">
                    <input type="text" id="frm-seotitle" class="form-control" name="row[seotitle]" placeholder="{:lang('Enter seotitle')}" data-rule="">
                </div>
            </div>
			<div class="form-group row bb-solid">
                <label for="frm-keywords" class="col-sm-2 col-12 col-form-label">{:lang('Keywords')}: </label>
                <div class="col-sm-8 col-12">
					<textarea id="frm-keywords" class="form-control " name="row[keywords]" placeholder="{:lang('Enter keywords')}" data-rule="" rows="3"></textarea>
                </div>
            </div>
			<div class="form-group row bb-solid">
                <label for="frm-description" class="col-sm-2 col-12 col-form-label">{:lang('Description')}: </label>
                <div class="col-sm-8 col-12">
					<textarea id="frm-description" class="form-control" name="row[description]" placeholder="{:lang('Enter description')}" data-rule="" rows="3"></textarea>
                </div>
            </div>
			<div class="images-list" style="display: none">
				<div class="form-group row">
					<label for="frm-image" class="col-sm-2 col-form-label">{:lang("Cover")}</label>
					<div class="col-sm-8 fileGroup">
						<div class="file-btn">
							<input type="text" class="form-control txt-files" id="frm-image" name="row[image]" value="" placeholder="{:lang("Cover")}">
							<input type="button"
								   class="btn btn-default ml-1 btn-imgUpload"
								   data-mimetype="image/*"
								   data-multiple="false"
								   data-field="frm-image"
								   value="{:lang('Upload image')}">
							<input type="button"
								   class="btn btn-primary ml-1 btn-imgSelect"
								   data-mimetype="image/jpeg,image/png"
								   data-multiple="false"
								   data-field="frm-image"
								   value="{:lang('Select image')}">
						</div>
						<div class="file-preview row mt-2"></div>
					</div>
				</div>
			</div>
            </div>
        </div>
        <div class="card-footer">
            <div class="row">
                <div class="col-sm-2"></div>
                <div class="col-sm-8">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>
{block:script}
<script>
    require(['jquery','jquery-ui','Form','layer'], function ($, undefined, Form, undefined) {
        $(function(){
            
			// 类型选择切换
            $('.type-op').change(function (e) {
                var value = $('.type-op').find('input[type=radio]:checked').val();
                if (value==1) {
                    $('.images-list').hide();
                    //$('.video-list').hide();
                } else if (value==2) {
                    $('.images-list').show();
                    //$('.video-list').show();
                }
            });
			
			// 删除
            $(document).on('click', '.btn-del-item', function () {
                $(this).parents('.card-item').parent().remove();
            });

            Form.api.init({
				success:function (data) {
					//window.history.back();
				}
			});
        })
    })

setTimeout(function(){
document.getElementById("frm-title").focus();
}, 0);

</script>
{/block:script}